<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>kaoshi题</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
    ></script>
    <style>
      * {
        margin: 0 auto;
      }
      div {
        padding-top: 20px;
        text-align: center;
      }
      input {
        width: 100px;
      }
      button {
        margin-top: 10px;
        width: 100px;
      }
      th,
      td {
        text-align: center;
      }
      li {
        width: 130px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #000;
      }
    </style>
  </head>

  <body>
    <!-- 标题 -->
    <div style="text-align: center">
      <h1>学生成绩考试录入</h1>
    </div>
    <!-- 学生信息录入 -->
    <div>
      <!-- 三级联动 -->
      <select name="" id="provice">
        <option value="">请选择学校</option>
      </select>
      <select name="" id="city">
        <option value="">请选择年级</option>
      </select>
      <select name="" id="area">
        <option value="">请班级</option>
      </select>
      <br />
      <!-- 添加学生信息 -->
      <div style="text-align: left; margin-left: 35%">
        姓 名：<input id="stuname" type="text" style="width: 100px" /><br />
        语 文：<input id="chinese" type="number" min="0" max="120" /><br />
        数 学：<input id="maths" type="number" min="0" max="120" /><br />
        英 语：<input id="english" type="number" min="0" max="120" /><br />
        <button id="add" style="margin-left: 30px">添加</button>
      </div>
      <hr style="margin-top: 10px" />
      <div>
        <ul class="nav nav-tabs" role="tablist" id="tabul"></ul>
      </div>
      <!-- 排序 -->
      <div>
        <button class="btnsort" val="c">语文</button>
        <button class="btnsort" val="m">数学</button>
        <button class="btnsort" val="e">英语</button>
        <button class="btnsort" val="t">总分</button>
      </div>
      <!-- 学生信息列表 -->
      <div id="stulist">
        <table class="table table-bordered" style="width: 600px">
          <thead>
            <th>年级-班级</th>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
            <th>平均分</th>
            <th>名次</th>
          </thead>
          <tbody id="tlist"></tbody>
        </table>
      </div>
    </div>
  </body>
  <script>
    //三级联动数据 和 tabs 初始化数据
    var citys = [
      {
        name: '北京市朝阳小学',
        city: [
          {
            name: '一年级',
            area: ['01班', '02班'],
          },
          {
            name: '二年级',
            area: ['01班', '02班'],
          },
        ],
      },
      {
        name: '北京市西城小学',
        city: [
          {
            name: '一年级',
            area: ['01班', '02班'],
          },
          {
            name: '二年级',
            area: ['01班', '02班'],
          },
        ],
      },
    ]
    $(function () {
      //三级联动
      showSelect()
      //显示默认的列表
      showList()
      //添加数据
      $('#add').click(function () {
        var school = $('#provice').val(), //学校的下标
          grades = $('#city').val(), //班级和
          classa = $('#area').val()
        stuname = $('#stuname').val()
        chinese = $('#chinese').val()
        maths = $('#maths').val()
        english = $('#english').val()
        if (
          !school ||
          !provice ||
          !grades ||
          !classa ||
          !stuname ||
          !chinese ||
          !maths ||
          !english
        ) {
          alert('信息填写不完整')
          return
        }
        var obj = {
          className:
            $('#city option:checked').html() +
            ' - ' +
            $('#area option:checked').html(), //拼接班级名字
          name: stuname,
          chinese: chinese,
          maths: maths,
          english: english,
          total: +chinese + +maths + +english,
          pv: ((+chinese + +maths + +english) / 3).toFixed(),
        }
        //准备好数据之后 添加到本地存储
        setData(school, obj) //将学校的下标 和 拼接好的数据传参过去
        showList(school) //刷新显示的列表 将刷新的学校下标传参过去
      })

      //绑定排序点击事件
      $('.btnsort').click(function () {
        var type = $(this).attr('val')
        $('li').each(function (i) {
          if ($(this).hasClass('active')) {
            showList(i, type)
          }
        })
      })
    })

    //添加本地数据
    function setData(school, obj) {
      if (!localStorage.getItem('data')) {
        var arr = []
        for (i in citys) {
          arr.push([])
        }
        arr[school].push(obj)
        localStorage.setItem('data', JSON.stringify(arr))
      } else {
        var arr = JSON.parse(localStorage.getItem('data'))
        arr[school].push(obj)
        localStorage.setItem('data', JSON.stringify(arr))
      }
    }

    //显示列表  school参数下标 , 排序
    function showList(school = 0, sort = 't') {
      //显示tabs标签 参数默认选中项
      showTabs(school)
      //绑定li点击事件
      $('li').click(function () {
        showList($(this).index())
      })
      //检查和获取要显示的数据
      var data = JSON.parse(localStorage.getItem('data'))
      if (!data) {
        $('#tlist').html('暂没有数据')
        return
      }
      var list = data[school] //学校学生列表
      var stuHtml = ''
      //默认按照总分排序显示列表
      list = dataSort(list, sort)
      for (let i in list) {
        stuHtml += `<tr>
                            <td>${list[i].className}</td>
                            <td>${list[i].name}</td>
                            <td>${list[i].chinese}</td>
                            <td>${list[i].maths}</td>
                            <td>${list[i].english}</td>
                            <td>${list[i].total}</td>
                            <td>${list[i].pv}</td>
                            <td>${Number(i) + 1}</td>
                        </tr>
                       `
      }
      $('#tlist').html(stuHtml)
    }

    //显示tabs标签页
    function showTabs(index) {
      var liStr = ''
      for (i in citys) {
        liStr += `<li>
                            ${citys[i].name}
                      </li>`
      }
      $('#tabul').html(liStr)
      $('li').css('background', 'white')
      $('li').eq(index).css('background', 'red')
      $('li').eq(index).addClass('active')
    }

    //数据排序 //type : c 语文、 e 英语、 m 数学、 t 总分、 p 平均分
    function dataSort(list, type = 't') {
      switch (type) {
        case 'c':
          list.sort(function (a, b) {
            return b.chinese - a.chinese
          })
          break
        case 'e':
          list.sort(function (a, b) {
            return b.english - a.english
          })
          break
        case 'm':
          list.sort(function (a, b) {
            return b.maths - a.maths
          })
          break
        default:
          //默认总分 平均分
          list.sort(function (a, b) {
            return b.total - a.total
          })
          break
      }
      return list
    }

    //三级联动
    function showSelect() {
      var provice = ''
      for (i in citys) {
        provice += `<option value="${i}">${citys[i].name}</option>`
      }
      $('#provice').append(provice)
      $('#provice').change(function () {
        $('#city option:gt(0)').remove()
        var arr = citys[$(this).val()].city,
          strCity = ''
        for (i in arr) {
          strCity += `<option value="${$(this).val()}-${i}" >${
            arr[i].name
          }</option>`
        }
        $('#city').append(strCity)
      })
      $('#city').change(function () {
        var arr = $(this).val().split('-')
        $('#area option:gt(0)').remove()
        var area = citys[arr[0]].city[arr[1]].area
        var html = ''
        for (i in area) {
          html += `<option value="${$(this).val()}-${i}" >${area[i]}</option>`
        }
        $('#area').append(html)
      })
    }
  </script>
</html>
